<!--  -->
<template>
  <el-drawer :visible.sync="visible"
             :with-header="false"
             :append-to-body='false'
             :close-on-press-escape='false'
             :destroy-on-close='true'
             :modal='false'
             size='100%'
             style="position:fixed;width:100%;height:100%;top:0;left:0;z-index:2013;">
    <BotDesign ref="bot-design"
               :botIds='botId'
               :needCloseBtn='true'
               @closeComponent='closeDialog' />
  </el-drawer>
</template>

<script>
import BotDesign from './bot-design'

export default {
  components: { BotDesign },
  data () {
    return {
      visible: false,
      botId: null
    }
  },
  methods: {
    openDialog (botId) {
      this.botId = botId
      this.visible = true
      this.$nextTick(() => {
        this.$refs['bot-design'].init()
      })
    },
    closeDialog () {
      this.visible = false
      this.botId = null
    }
  }
}
</script>
